﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="scrollto,jquery" />
    <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
    <title>hiAlert：美化的网页对话框</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/alert.css" />
    <style type="text/css">
        .demo
        {
            width: 400px;
            margin: 20px auto;
        }
        .demo h3
        {
            line-height: 24px;
        }
        .demo p
        {
            line-height: 20px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
    <script type="text/javascript" src="jquery.alert.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#a1").click(function () {
                hiAlert("http://www.baidu.com", "提示");
            });
            $("#a2").click(function () {
                hiConfirm('你确认此操作吗?', '确认框', function (r) {
                    hiOverAlert('你的反馈是: ' + r);
                });
            });
            $("#a3").click(function () {
                hiPrompt('请填写:', '默认值', '输入框', function (r) {
                    if (r) hiOverAlert('你填入的内容是“' + r + '”');
                });
            });
            $("#a4").click(function () {
                hiBox('http://www.baidu.com', '标题11', 400, '', '', '.a_close');
            });
            $("#a5").click(function () {
                hiOverAlert('操作提示条信息', 1500);
            });
        });
    </script>
</head>
<body>
    <div id="header">
        <div id="logo">
            <h1>
                <a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1>
        </div>
    </div>
    <div id="main">
        <h2 class="top_title">
            <a href="http://www.helloweba.com/view-blog-124.html">hiAlert：美化的网页对话框</a></h2>
        <div class="demo">
            <h3>
                1、警告框</h3>
            <p>
                <a href="#" id="a1">点击这里</a></p>
        </div>
        <div class="demo">
            <h3>
                2、确认框</h3>
            <p>
                <a href="#" id="a2">点击这里</a></p>
        </div>
        <div class="demo">
            <h3>
                3、输入框</h3>
            <p>
                <a href="#" id="a3">点击这里</a></p>
        </div>
        <div class="demo">
            <h3>
                4、网页框</h3>
            <p>
                <a href="#" id="a4">点击这里</a></p>
        </div>
        <div class="demo">
            <h3>
                5、提示条</h3>
            <p>
                <a href="#" id="a5">点击这里</a></p>
        </div>
    </div>
    <div id="footer">
        <p>
            Powered by helloweba.com 允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
    </div>
    <div id="showbox" style="display: none">
        <h3>
            这是一段测试用的文字</h3>
        <p>
            我们关注业内发展动态，我们热爱WEB设计与开发，我们关注用户体验和网站的可用性，并遵循WEB标准，我们以推动规范设计为己任，我们致力于WEB前端技术在中国的应用，我们为用户提供优质高效的网站设计。<a
                href="http://www.helloweba.com">helloweba.com</a></p>
        <p style="text-align: right">
            <a href="#" class="a_close">关闭</a></p>
    </div>
    <p id="stat">
        <script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script>
    </p>
</body>
</html>
